<style lang="less">
	@import "CategoryList";
	.van-field__body {
		height: 100%;
	}
</style>
<script>

  import {getList} from '@/api/goods';
  import {getCategoryList} from '@/api/category';
  import GoodsItems from "../../components/goods/GoodsItems";
  import Vue from 'vue';
  import {List, Tab, Tabs, Image, Search} from 'vant';

  Vue.use(List).use(Tab).use(Tabs).use(Image).use(Search);
  export default {
    name: 'category-list',
    components: {
      GoodsItems
    },
    data() {
      return {
        keyword: null,
        category_id: null,
        active: 0,
        categorys: null
      };
    },
    created() {
      this.category_id = this.$route.params.category_id;
      this.getCategory();
    },
    methods: {
      onLoad(index) {
        if (this.categorys[index].finished) {
          return;
        }
        this.getList();
      },
      getCategory() {
        let vm = this;
        getCategoryList().then(rep => {
          rep.data.data.forEach((v, index) => {
            v.index = index + 1;
            v.loading = false;
            v.finished = false;
            v.list = [];
            if (v.id === vm.category_id) {
              vm.active = index;
            }
          });
          //先手动添加一个全部
          vm.categorys = [{index: 0, loading: false, finished: false, title: '全部', list: [], id: null}];
          vm.categorys = vm.categorys.concat(rep.data.data);
        })
      },

      getList() {
        let vm = this;
        if (vm.categorys[vm.active].finished) {
          return;
        }
        let page = vm.categorys[vm.active].list.length / 20 + 1;
        getList({page: page, size: 20, category_id: vm.categorys[vm.active].id, keyword: vm.keyword}).then(rep => {
          rep.data.data.list.forEach(v => {
            if (v.banner != null) {
              v.banner = JSON.parse(v.banner);
            }
          });
          vm.categorys[vm.active].list = vm.categorys[vm.active].list.concat(rep.data.data.list);
          if (vm.categorys[vm.active].list.length === rep.data.data.count) {
            vm.categorys[vm.active].finished = true;
          }
          vm.categorys[vm.active].loading = false;
        });
      },
      onSearch() {
        this.categorys[this.active].finished =false;
        this.categorys[this.active].list = [];
        // this.getList();
      },
      onCancel() {
        this.categorys[this.active].finished =false;
        this.categorys[this.active].list = [];
        this.keyword = null;
        // this.getList();
      }
    }
  }
</script>
<template>
	<div class="category-list-container">
		<form action="/">
			<van-search
				v-model="keyword"
				placeholder="请输入搜索关键词"
				show-action
				@search="onSearch"
				@cancel="onCancel"
			/>
		</form>
		<van-tabs v-if="categorys!==null" v-model="active" sticky animated swipeable
		          title-active-color="#EC414D"
		          :swipe-threshold="5" lazy-render>
			<template v-for="(cateogyrItem,index) in categorys">
				<van-tab :title="cateogyrItem.title" :name="cateogyrItem.index" :key="index">
					<van-list
						v-model="cateogyrItem.loading"
						:finished="cateogyrItem.finished"
						finished-text="没有更多了"
						@load="onLoad(index)">
						<GoodsItems :list="cateogyrItem.list"></GoodsItems>
					</van-list>
				</van-tab>
			</template>
		</van-tabs>
	
	</div>
</template>
